<template>
  <div class="login-container">
    <div class="login-left"></div>
    <div class="login-right">
      <img :src="require('@/assets/images/logo2.png')"
           class="logo">
      <el-form class="login-right-container"
               ref="ruleForm"
               :rules="rules"
               :model="form">
        <el-form-item prop="mobile">
          <el-input v-model.trim="form.mobile"
                    prefix-icon="el-icon-user"
                    maxlength="11"
                    show-word-limit
                    clearable
                    placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model.trim="form.password"
                    type="password"
                    prefix-icon="el-icon-unlock"
                    maxlength="16"
                    show-word-limit
                    clearable
                    placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="onSubmit"
                     class="login-bnt"
                     :loading="loading">{{loading?'登录中':'登录'}}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	name : 'login',
	data () {
		return {
			loading : false,
			form : {
				mobile : '',
				password : ''
			},
			rules : {
				mobile : [
					{ required : true, message : '请输入手机号码', trigger : 'blur' }
				],
				password : [
					{ required : true, message : '请输入密码', trigger : 'blur' }
				]
			}
		};
	},
	created () {
	},
	methods : {
		...mapActions('User', {
			userAction : 'userAction'
		}),
		onSubmit () {
			this.$refs.ruleForm.validate(async (valid) => {
				if (valid) {
					this.loading = true;
					try {
						const result =  await this.$api.login(this.form);
						this.userAction(result.data);
						this.$router.push({
							path : this.$route.query.redirect || '/'
						});
					} finally {
						this.loading = false;
					}
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.login-container {
  display: flex;
  position: fixed;
  width: 800px;
  height: 460px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 20px 0 rgba(57, 104, 249, 0.11);
}
.login-left {
  flex: 1;
  background: url('~@/assets/images/banner.png') no-repeat;
  background-size: 100% 100%;
}
.login-right {
  flex: 1;
}
.logo {
  display: block;
  margin: 50px auto 50px;
}
.login-right-container {
  width: 282px;
  height: 304px;
  margin: 0 auto;
}
.login-bnt {
  width: 100%;
}
</style>
